﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>SQL平台</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap-table.css"/>
    <link rel="stylesheet" href="../css/bootstrap-table-fixed-columns.css"/>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.js"></script>
    <script src="../js/bootstrap-table-fixed-columns.js"></script>
</head>
<script type="text/javascript">

    function rowStyle(row, index) {
        if (index % 2 === 0) {
            return {css: {"background-color": 'rgb(255,255,255)'}};
        } else {
            return {css: {"background-color": 'rgb(247,248,249)'}};
        }
        return {};
    }

    function executeSql() {
        let content = $('#content').val();
        content = content.replace(/^\s+|\s+$/g, "");
        if (content !== "") {
            if (content.toLowerCase().substr(0, 6) === "select") {
                let encodContent = encode64(encodeURIComponent(content,'utf-8'));//加密account为加密内容
                let columnsData = getColumnsData(encodContent);
                $('#table').bootstrapTable('destroy').bootstrapTable({
                    method: 'get',
                    url: '/interface/sqlplatform/page/getSelectSql_Ajax.jsp?content=' + encodContent,
                    cache: true, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
                    striped: true,  //表格显示条纹，默认为false
                    async: false,
                    pagination: true, //开启分页
                    sortable: false,  //是否启用排序
                    sortOrder: "asc",  //排序方式
                    pageNumber: 1,//首页页码
                    pageSize: 10,//每页显示记录数
                    pageList: [10, 20],  //可供选择的页面数据条数。设置为All则显示所有记录（即不分页）。
                    paginationPreText: '上一页',//指定分页条中上一页按钮的图标或文字,这里是<
                    paginationNextText: '下一页',//指定分页条中下一页按钮的图标或文字,这里是>
                    paginationLoop: false,// 页码循环跳转（即最后一页的下一页是第一页）
                    sidePagination: "client", //分页方式：client客户端分页，server服务端分页
                    rowStyle: rowStyle,//通过自定义函数设置行样式
                    columns: columnsData
                });
            } else {
                let encodContent = encode64(encodeURIComponent(content,'utf-8'));//加密account为加密内容
                $('#table').bootstrapTable('destroy').bootstrapTable({
                    method: 'get',
                    url: '/interface/sqlplatform/page/getUpdateSql_Ajax.jsp?content=' + encodContent,
                    cache: true, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
                    striped: true,  //表格显示条纹，默认为false
                    async: false,
                    pagination: true, //开启分页
                    sortable: false,  //是否启用排序
                    sortOrder: "asc",  //排序方式
                    pageNumber: 1,//首页页码
                    pageSize: 10,//每页显示记录数
                    pageList: [10, 20],  //可供选择的页面数据条数。设置为All则显示所有记录（即不分页）。
                    paginationPreText: '上一页',//指定分页条中上一页按钮的图标或文字,这里是<
                    paginationNextText: '下一页',//指定分页条中下一页按钮的图标或文字,这里是>
                    paginationLoop: false,// 页码循环跳转（即最后一页的下一页是第一页）
                    sidePagination: "client", //分页方式：client客户端分页，server服务端分页
                    rowStyle: rowStyle,//通过自定义函数设置行样式
                    columns: [
                        {
                            "field": "index",
                            "title": "序号",
                            "align": "center",
                            "width": "100"
                        },
                        {
                            "field": "status",
                            "title": "执行结果",
                            "align": "center",
                            "valign": "middle",
                            "width": "200"
                        }
                    ]
                });
            }
        }

    }

    //获取字段名称
    function getColumnsData(content) {
        var datas = [];
        $.ajax({
            async: false,
            url: '/interface/sqlplatform/page/getColumnsData_Ajax.jsp',
            type: "GET",
            dataType: "json",
            data: {content: content},
            success: function (data) {
                if (data.status === 'success') {
                    datas = data.columnsList;
                }
            }, error: function (e) {
            }
        });
        return datas;
    }

    function encode64(input) {
        var keyStr = "ABCDEFGHIJKLMNOP" + "QRSTUVWXYZabcdef" + "ghijklmnopqrstuv"
            + "wxyz0123456789+/" + "=";
        var output = "";
        var chr1, chr2, chr3 = "";
        var enc1, enc2, enc3, enc4 = "";
        var i = 0;
        do {
            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);
            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;
            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2)
                + keyStr.charAt(enc3) + keyStr.charAt(enc4);
            chr1 = chr2 = chr3 = "";
            enc1 = enc2 = enc3 = enc4 = "";
        } while (i < input.length);

        return output;
    }
    // base64加密结束

</script>
<body>
<div class="jumbotron bg">
    <div class="container-fluid">
        <div region="north" class="north" style="height: 160px;">
            <div class="row">
                <div class="col-md-11">
                    <div class="form-group">
                        <textarea class="form-control" rows="10" id="content" style="height: 160px"></textarea>
                    </div>
                </div>
                <div class="col-md-1" style="margin-top: 4%;">
                    <button type="submit" onclick="executeSql()" class="btn btn-primary" style=" width: 100px; height: 45px;margin-left: -25px;">点击执行</button>
                </div>

            </div>
        </div>

        <div region="center" class="center flex-fill" style="width: 100%;height: 500px;overflow-y:scroll;">
            <div class="d-flex flex-column" style="width: 100%; height: 100%;background-color: ghostwhite;border:1.5px solid #c7c6c8">
                <table id="table" style="width: 100%; font-size: 10px;overflow:scroll" class="text-info"></table>
            </div>
        </div>
    </div>
</div>
</body>
</html>